{# 继承 base.html #}
{% extends "base.html" %}

{# 替换title #}
{% block title %}
{{ title }}
{% endblock %}


{# 替换内容 #}
{% block content %}
<script type="text/javascript">
function reload() {
    setTimeout(function(){
        location.reload(true);
    }, 500);
}
</script>
<script>
        function getProfessionDetail(x)
        {
            var y = {{ pro_js|safe }};
            var message = '<h4>'+x+'</h4></br>' +
                '<table class="table table-bordered table-hover table-striped" width="600px">';
            var count = 0;
            const col = 3;
            for (var i = 0; i < y.length; i++) {
                if(y[i]['fields']['type1'] === x){
                    {#console.log(count, count%2)#}
                    if(count%col === 0){
                        message = message + '<tr height="30px">';
                        message = message + '<td><a onclick="reload()" target="_blank" href="../profession/'+y[i]['fields']['profession_name']+'专业">'
                    +y[i]['fields']['profession_name'] + '</a></td>';
                    }
                    else {
                        message = message + '<td><a onclick="reload()" target="_blank" href="../profession/'+y[i]['fields']['profession_name']+'专业">'
                    +y[i]['fields']['profession_name'] + '</a></td>';
                    }
                    if(count%col === col-1){
                        message = message+'</tr>';
                    }
                    count++;
                    {#console.log(y[i]['fields']['type1']);#}
                }
            }

            let div = document.getElementById('profession_message');
            div.innerHTML = message;


        }
    </script>
    <div class="container-fluid row">
        {# 左侧导航栏专业大类 #}
        <div class="container-fluid col-sm-2">
            <div class="span3">
                <ul class="nav nav-list well">
                    <li class="nav-header">
                        <h4>专业类别</h4>
                    </li>
                    {% for foo in type1 %}
                        <li class="active">
                            <button id="{{ foo }}" class="btn btn-info" style="width: 170px; font-size: large; padding-top: 4px; padding-bottom: 4px; margin-top: 5px" onclick="getProfessionDetail('{{ foo }}')">{{ foo }}</button>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
	    <div class="container-fluid col-sm-7">
            <div id="profession_message">
                <script>
                    getProfessionDetail('工学')
                </script>
            </div>
        </div>
        <div class="container-fluid col-sm-3">
            <h4>专业推荐</h4>
        {% if have_done %}
            <h4>请完成<a href="../analysis/">性格测试</a>，专业推荐效果更佳</h4>
        {% endif %}
            <li>
                {% for foo in profession_hot %}
                    <a target="_blank" href="../profession/{{ foo.profession_name }}专业"><ul>{{ foo.profession_name }}</ul></a>
                {% endfor %}

            </li>
        </div>
    </div>

        <div class="well" style="height: 100px"></div>
{% endblock %}